<!-- 退出登录 -->
<template>
  <div class="sidebar-container" :class="{ 'show': visible }">
    <div class="sidebar-content">
      <!-- 标题 -->
      <div class="header">
        <span class="title">个人信息</span>
        <span class="close-btn" @click="$emit('close')">&times;</span>
      </div>

      <!-- 基本信息部分 -->
      <div class="info-section">
        <div class="info-item">
          <div class="left">头像</div>
          <div class="right">
            <img :src="avatarSrc" alt="头像" class="avatar">
            <span class="arrow">&gt;</span>
          </div>
        </div>
        <div class="info-item" @click="showGenderSelector">
          <div class="left">性别</div>
          <div class="right">
            <span class="value">{{ gender || '未设置' }}</span>
            <span class="arrow">&gt;</span>
          </div>
        </div>
        <div class="info-item" @click="showBirthdaySelector">
          <div class="left">生日</div>
          <div class="right">
            <span class="value">{{ birthday || '未设置' }}</span>
            <span class="arrow">&gt;</span>
          </div>
        </div>
        <div class="info-item" @click="showAreaSelector">
          <div class="left">地区</div>
          <div class="right">
            <span class="value">{{ selectedArea || '未设置' }}</span>
            <span class="arrow">&gt;</span>
          </div>
        </div>
        <div class="info-item">
          <div class="left">绑定手机</div>
          <div class="right">
            <span class="value">{{ maskedPhone }}</span>
          </div>
        </div>
        <div class="info-item">
          <div class="left">学生认证</div>
          <div class="right">
            <span class="value">未认证</span>
            <span class="arrow">&gt;</span>
          </div>
        </div>
        <div class="info-item">
          <div class="left">客服电话</div>
          <div class="right">
            <span class="value">95338</span>
          </div>
        </div>
      </div>

      <!-- 隐私政策部分 -->
      <div class="policy-section">
        <div class="info-item" v-for="(item, index) in policyItems" :key="index">
          <div class="left">{{ item }}</div>
          <div class="right">
            <span class="arrow">&gt;</span>
          </div>
        </div>
      </div>

      <!-- 退出登录按钮 -->
      <div class="logout-section">
        <button class="logout-btn" @click="handleLogout">退出登录</button>
        <div class="cancel-account">
          <span class="cancel-text" @click="showCancelConfirm">注销账号</span>
          <p class="cancel-warning">注销后无法恢复，请谨慎操作</p>
        </div>
      </div>

      <!-- 用户协议和隐私政策 -->
      <div class="agreement-section">
        <router-link to="/user-agreement" class="agreement-link">《顺丰速运用户协议》</router-link>
        <router-link to="/privacy-policy" class="agreement-link">《顺丰速运隐私政策》</router-link>
      </div>
    </div>

    <!-- 地区选择弹出框 -->
    <div class="area-selector" v-if="showAreaBox">
      <div class="area-selector-content">
        <div class="area-header">
          <div class="area-title">
            <strong>请选择省市区</strong>
          </div>
          <span class="close-btn" @click="showAreaBox = false">&times;</span>
        </div>

        <div class="search-box">
          <img src="../assets/sousuo.png" alt="搜索" class="search-icon">
          <input type="text" v-model="searchText" placeholder="请输入省份/城市/区县搜索" class="search-input">
        </div>

        <div class="hot-cities">
          <h3>热门城市</h3>
          <div class="hot-cities-grid">
            <div v-for="city in hotCities" :key="city.name" class="hot-city-item"
              :class="{ active: selectedArea === city.full }" @click="selectHotCity(city)">
              {{ city.name }}
            </div>
          </div>
        </div>

        <div class="area-selectors">
          <div class="selector province-selector">
            <div class="scroll-container">
              <div v-for="province in provinces" :key="province" :class="{ active: selectedProvince === province }"
                @click="selectProvince(province)">
                {{ province }}
              </div>
            </div>
          </div>
          <div class="selector city-selector">
            <div class="scroll-container">
              <div v-for="city in cities" :key="city" :class="{ active: selectedCity === city }"
                @click="selectCity(city)">
                {{ city }}
              </div>
            </div>
          </div>
          <div class="selector district-selector">
            <div class="scroll-container">
              <div v-for="district in districts" :key="district" :class="{ active: selectedDistrict === district }"
                @click="selectDistrict(district)">
                {{ district }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 生日选择弹出框 -->
    <div class="birthday-selector" v-if="showBirthdayBox">
      <div class="birthday-selector-content">
        <div class="birthday-header">
          <div class="birthday-title">
            <strong>生日</strong>
            <span class="subtitle">生日信息提交后将不能修改</span>
          </div>
          <span class="close-btn" @click="showBirthdayBox = false">&times;</span>
        </div>
        <div class="birthday-content">
          <div class="date-labels">
            <span>年</span>
            <span>月</span>
            <span>日</span>
          </div>
          <div class="date-selectors">
            <div class="selector year-selector">
              <div class="scroll-container">
                <div v-for="year in years" :key="year" :class="{ active: selectedYear === year }"
                  @click="selectedYear = year">
                  {{ year }}
                </div>
              </div>
            </div>
            <div class="selector month-selector">
              <div class="scroll-container">
                <div v-for="month in months" :key="month" :class="{ active: selectedMonth === month }"
                  @click="selectedMonth = month">
                  {{ month }}
                </div>
              </div>
            </div>
            <div class="selector day-selector">
              <div class="scroll-container">
                <div v-for="day in days" :key="day" :class="{ active: selectedDay === day }" @click="selectedDay = day">
                  {{ day }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="birthday-footer">
          <button class="confirm-btn" @click="handleBirthdayConfirm">确定</button>
        </div>
      </div>
    </div>

    <!-- 性别选择弹出框 -->
    <div class="gender-selector" v-if="showGenderBox">
      <div class="gender-selector-content">
        <div class="gender-header">
          <span class="gender-title">性别</span>
          <span class="close-btn" @click="showGenderBox = false">&times;</span>
        </div>
        <div class="gender-options">
          <div class="gender-option" @click="selectGender('男')">男</div>
          <div class="gender-option" @click="selectGender('女')">女</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfoSidebar',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    phone: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      policyItems: [
        '隐私政策概要',
        '个人信息收集',
        '第三方信息共享',
        '权限清单',
        '第三方服务'
      ],
      gender: '',
      showGenderBox: false,
      birthday: '',
      showBirthdayBox: false,
      selectedYear: new Date().getFullYear(),
      selectedMonth: new Date().getMonth() + 1,
      selectedDay: new Date().getDate(),
      years: Array.from({ length: 100 }, (_, i) => new Date().getFullYear() - i),
      months: Array.from({ length: 12 }, (_, i) => i + 1),
      days: Array.from({ length: 31 }, (_, i) => i + 1),
      // 地区选择器相关
      showAreaBox: false,
      selectedArea: '',
      searchText: '',
      hotCities: [
        { name: '北京', full: '北京市北京市东城区' },
        { name: '上海', full: '上海市上海市黄浦区' },
        { name: '宜宾', full: '四川省宜宾市叙州区' },
        { name: '深圳', full: '广东省深圳市福田区' },
        { name: '杭州', full: '浙江省杭州市上城区' },
        { name: '泸州', full: '四川省泸州市龙马潭区' },
        { name: '武汉', full: '湖北省武汉市江岸区' },
        { name: '成都', full: '四川省成都市锦江区' }
      ],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      provinces: [], // 省份列表
      cities: [], // 城市列表
      districts: [] // 区县列表
    }
  },
  computed: {
    maskedPhone() {
      if (!this.phone) return '';
      return this.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    },
    avatarSrc() {
      if (this.gender === '男') {
        return require('../assets/tou-nan.png');
      } else if (this.gender === '女') {
        return require('../assets/tou-nv.png');
      }
      return require('../assets/tou.png');
    }
  },
  methods: {
    showGenderSelector() {
      this.showGenderBox = true;
    },
    selectGender(gender) {
      this.gender = gender;
      this.showGenderBox = false;
      this.$emit('gender-change', gender);
    },
    handleLogout() {
      // 清除localStorage中的用户信息
      localStorage.removeItem('userInfo');
      // 发出退出登录事件
      this.$emit('logout');
      // 关闭侧边栏
      this.$emit('close');
    },
    showCancelConfirm() {
      // 显示注销账号确认对话框
      if (confirm('确定要注销账号吗？注销后账号数据将无法恢复。')) {
        // 这里可以添加注销账号的逻辑
        alert('账号已注销');
        this.handleLogout(); // 注销后执行退出登录
      }
    },
    showBirthdaySelector() {
      this.showBirthdayBox = true;
    },
    handleBirthdayConfirm() {
      const birthday = `${this.selectedYear}-${String(this.selectedMonth).padStart(2, '0')}-${String(this.selectedDay).padStart(2, '0')}`;
      this.birthday = birthday;
      this.showBirthdayBox = false;
      this.$emit('birthday-change', birthday);
    },

    // 地区选择器相关方法
    showAreaSelector() {
      this.showAreaBox = true;
      // 加载省份数据（示例数据）
      this.provinces = [
        '北京市', '上海市', '天津市', '重庆市', '四川省',
        '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省',
        '江苏省', '浙江省', '安徽省', '福建省', '江西省',
        '山东省', '河南省', '湖北省', '湖南省', '广东省',
        '海南省', '贵州省', '云南省',
        '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区', '广西壮族自治区',
        '香港特别行政区', '澳门特别行政区', '陕西省',
        '甘肃省', '青海省', '台湾省'
      ];
    },

    selectHotCity(city) {
      this.selectedArea = city.full;
      this.showAreaBox = false;
      this.$emit('area-change', city.full);
    },

    selectProvince(province) {
      this.selectedProvince = province;
      this.selectedCity = '';
      this.selectedDistrict = '';
      // 根据省份加载对应的城市数据
      if (province === '四川省') {
        this.cities = ['成都市', '绵阳市', '自贡市', '攀枝花市', '泸州市', '德阳市', '广元市', '遂宁市', '内江市', '乐山市', '资阳市', '宜宾市', '南充市', '达州市', '雅安市', '广安市', '巴中市', '眉山市'];
      } else if (province === '河北省') {
        this.cities = ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'];
      } else if (province === '山西省') {
        this.cities = ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'];
      } else if (province === '内蒙古自治区') {
        this.cities = ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'];
      } else if (province === '辽宁省') {
        this.cities = ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'];
      } else if (province === '吉林省') {
        this.cities = ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'];
      } else if (province === '黑龙江省') {
        this.cities = ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'];
      } else if (province === '江苏省') {
        this.cities = ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'];
      } else if (province === '浙江省') {
        this.cities = ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'];
      } else if (province === '安徽省') {
        this.cities = ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'];
      } else if (province === '福建省') {
        this.cities = ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'];
      } else if (province === '江西省') {
        this.cities = ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'];
      } else if (province === '山东省') {
        this.cities = ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'];
      } else if (province === '河南省') {
        this.cities = ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市', '济源市'];
      } else if (province === '湖北省') {
        this.cities = ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州', '仙桃市', '潜江市', '天门市', '神农架林区'];
      } else if (province === '湖南省') {
        this.cities = ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'];
      } else if (province === '广东省') {
        this.cities = ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'];
      } else if (province === '广西壮族自治区') {
        this.cities = ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'];
      } else if (province === '海南省') {
        this.cities = ['海口市', '三亚市', '三沙市', '儋州市', '五指山市', '文昌市', '琼海市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'];
      } else if (province === '贵州省') {
        this.cities = ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'];
      } else if (province === '云南省') {
        this.cities = ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州'];
      } else if (province === '西藏自治区') {
        this.cities = ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市', '阿里地区'];
      } else if (province === '陕西省') {
        this.cities = ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'];
      } else if (province === '甘肃省') {
        this.cities = ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州'];
      } else if (province === '青海省') {
        this.cities = ['西宁市', '海东市', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'];
      } else if (province === '宁夏回族自治区') {
        this.cities = ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'];
      } else if (province === '新疆维吾尔自治区') {
        this.cities = ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉回族自治州', '博尔塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区', '石河子市', '阿拉尔市', '图木舒克市', '五家渠市', '北屯市', '铁门关市', '双河市', '可克达拉市', '昆玉市'];
      } else if (province === '台湾省') {
        this.cities = ['台北市', '新北市', '桃园市', '台中市', '台南市', '高雄市', '基隆市', '新竹市', '嘉义市', '新竹县', '苗栗县', '彰化县', '南投县', '云林县', '嘉义县', '屏东县', '宜兰县', '花莲县', '台东县', '澎湖县', '金门县', '连江县'];
      } else if (province === '香港特别行政区') {
        this.cities = ['中西区', '湾仔区', '东区', '南区', '油尖旺区', '深水埗区', '九龙城区', '黄大仙区', '观塘区', '北区', '大埔区', '沙田区', '西贡区', '荃湾区', '屯门区', '元朗区', '葵青区', '离岛区'];
      } else if (province === '澳门特别行政区') {
        this.cities = ['花地玛堂区', '圣安多尼堂区', '大堂区', '望德堂区', '风顺堂区', '嘉模堂区', '圣方济各堂区'];
      }
      else {
        this.cities = [`${province.slice(0, -1)}市`]; // 直辖市处理
      }
    },

    selectCity(city) {
      this.selectedCity = city;
      this.selectedDistrict = '';
      // 根据城市加载对应的区县数据（示例数据）
      if (city === '成都市') {
        this.districts = ['锦江区', '青羊区', '金牛区', '武侯区', '成华区'];
      } else if (city === '广州市') {
        this.districts = ['越秀区', '海珠区', '荔湾区', '天河区', '白云区'];
      } else if (city === '北京市') {
        this.districts = ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云区', '延庆区'];
      } else if (city === '上海市') {
        this.districts = ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区'];
      } else if (city === '天津市') {
        this.districts = ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '滨海新区', '宁河区', '静海区', '蓟州区'];
      } else if (city === '重庆市') {
        this.districts = ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '綦江区', '大足区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '璧山区', '铜梁区', '潼南区', '荣昌区', '开州区', '梁平区', '武隆区', '城口县', '丰都县', '垫江县', '忠县', '云阳县', '奉节县', '巫山县', '巫溪县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'];
      } else if (city === '武汉市') {
        this.districts = ['江岸区', '江汉区', '硚口区', '汉阳区', '武昌区', '青山区', '洪山区', '东西湖区', '汉南区', '蔡甸区', '江夏区', '黄陂区', '新洲区'];
      } else if (city === '深圳市') {
        this.districts = ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区', '盐田区'];
      } else if (city === '自贡市') {
        this.districts = ['自流井区', '贡井区', '大安区', '沿滩区', '荣县', '富顺县'];
      } else if (city === '攀枝花市') {
        this.districts = ['东区', '西区', '仁和区', '米易县', '盐边县'];
      } else if (city === '泸州市') {
        this.districts = ['江阳区', '纳溪区', '龙马潭区', '泸县', '合江县', '叙永县', '古蔺县'];
      } else if (city === '德阳市') {
        this.districts = ['旌阳区', '罗江区', '广汉市', '什邡市', '绵竹市', '中江县'];
      } else if (city === '绵阳市') {
        this.districts = ['涪城区', '游仙区', '安州区', '江油市', '三台县', '梓潼县', '盐亭县', '平武县', '北川羌族自治县'];
      } else if (city === '广元市') {
        this.districts = ['利州区', '昭化区', '朝天区', '旺苍县', '青川县', '剑阁县', '苍溪县'];
      } else if (city === '遂宁市') {
        this.districts = ['船山区', '安居区', '射洪市', '蓬溪县', '大英县'];
      } else if (city === '内江市') {
        this.districts = ['市中区', '东兴区', '隆昌市', '威远县', '资中县'];
      } else if (city === '乐山市') {
        this.districts = ['市中区', '五通桥区', '沙湾区', '金口河区', '峨眉山市', '犍为县', '井研县', '夹江县', '沐川县', '峨边彝族自治县', '马边彝族自治县'];
      } else if (city === '南充市') {
        this.districts = ['顺庆区', '高坪区', '嘉陵区', '阆中市', '西充县', '南部县', '蓬安县', '营山县', '仪陇县'];
      } else if (city === '眉山市') {
        this.districts = ['东坡区', '彭山区', '仁寿县', '洪雅县', '丹棱县', '青神县'];
      } else if (city === '宜宾市') {
        this.districts = ['翠屏区', '南溪区', '叙州区', '江安县', '长宁县', '高县', '珙县', '筠连县', '兴文县', '屏山县'];
      } else if (city === '广安市') {
        this.districts = ['广安区', '前锋区', '华蓥市', '岳池县', '武胜县', '邻水县'];
      } else if (city === '达州市') {
        this.districts = ['通川区', '达川区', '万源市', '大竹县', '渠县', '开江县', '宣汉县'];
      } else if (city === '雅安市') {
        this.districts = ['雨城区', '名山区', '荥经县', '汉源县', '石棉县', '天全县', '芦山县', '宝兴县'];
      } else if (city === '巴中市') {
        this.districts = ['巴州区', '恩阳区', '平昌县', '通江县', '南江县'];
      } else if (city === '资阳市') {
        this.districts = ['雁江区', '安岳县', '乐至县'];
      } else if (city === '阿坝藏族羌族自治州') {
        this.districts = ['马尔康市', '汶川县', '理县', '茂县', '松潘县', '九寨沟县', '金川县', '小金县', '黑水县', '壤塘县', '阿坝县', '若尔盖县', '红原县'];
      } else if (city === '甘孜藏族自治州') {
        this.districts = ['康定市', '泸定县', '丹巴县', '九龙县', '雅江县', '道孚县', '炉霍县', '甘孜县', '新龙县', '德格县', '白玉县', '石渠县', '色达县', '理塘县', '巴塘县', '乡城县', '稻城县', '得荣县'];
      } else if (city === '凉山彝族自治州') {
        this.districts = ['西昌市', '德昌县', '会理市', '会东县', '宁南县', '普格县', '布拖县', '昭觉县', '金阳县', '雷波县', '美姑县', '甘洛县', '越西县', '喜德县', '冕宁县', '盐源县', '木里藏族自治县'];
      }
      else {
        this.districts = ['市辖区']; // 默认区域
      }
    },

    selectDistrict(district) {
      this.selectedDistrict = district;
      // 确保地址格式统一：省份+城市+区县
      const fullArea = `${this.selectedProvince}${this.selectedCity}${district}`;
      this.selectedArea = fullArea;
      this.showAreaBox = false;
      this.$emit('area-change', fullArea);
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  z-index: 1000;
}

.sidebar-container.show {
  right: 0;
}

.sidebar-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
}

.info-section {
  margin-top: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.left {
  color: #333;
}

.right {
  display: flex;
  align-items: center;
  color: #999;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.arrow {
  margin-left: 10px;
  color: #999;
}

.policy-section {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.logout-section {
  margin-top: 30px;
  padding: 0 20px;
}

.logout-btn {
  width: 100%;
  padding: 12px;
  background-color: #ff0000;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.logout-btn:hover {
  background-color: #e60000;
}

.cancel-account {
  text-align: center;
  margin-top: 15px;
}

.cancel-text {
  color: #999;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

.cancel-warning {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}

.agreement-section {
  margin-top: 20px;
  text-align: center;
  padding: 0 20px;
}

.agreement-link {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  margin: 10px 0;
}

.agreement-link:hover {
  color: #ff0000;
}

/* 性别选择器样式 */
.gender-selector {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
}

.gender-selector-content {
  width: 100%;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.gender-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.gender-title {
  font-size: 16px;
  font-weight: bold;
}

.gender-options {
  padding: 10px 0;
}

.gender-option {
  padding: 15px 20px;
  text-align: center;
  font-size: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.gender-option:last-child {
  border-bottom: none;
}

.gender-option:active {
  background-color: #f5f5f5;
}

/* 生日选择器样式 */
.birthday-selector {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
}

.birthday-selector-content {
  width: 100%;
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.birthday-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.birthday-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.birthday-title strong {
  font-size: 18px;
  color: #000;
}

.birthday-title .subtitle {
  font-size: 14px;
  color: #999;
}

.date-labels {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.date-selectors {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  height: 200px;
}

.selector {
  flex: 1;
  height: 200px;
  overflow-y: auto;
  text-align: center;
  margin: 0 5px;
  position: relative;
}

.scroll-container {
  padding: 80px 0;
}

.scroll-container div {
  padding: 10px 0;
  color: #666;
  cursor: pointer;
}

.scroll-container div.active {
  color: #000;
  font-size: 20px;
  font-weight: bold;
}

.birthday-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.confirm-btn {
  width: 90%;
  padding: 12px;
  background-color: #ff0000;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.confirm-btn:active {
  background-color: #e60000;
}

/* 设置滚动条样式 */
.selector::-webkit-scrollbar {
  width: 4px;
}

.selector::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.selector::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.selector::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 地区选择器样式 */
.area-selector {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
}

.area-selector-content {
  width: 100%;
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  animation: slideUp 0.3s ease-out;
}

.area-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.area-title strong {
  font-size: 18px;
  color: #000;
}

.search-box {
  position: relative;
  margin-bottom: 20px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}

.search-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
}

.search-input::placeholder {
  color: #999;
}

.hot-cities h3 {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

.hot-cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.hot-city-item {
  background-color: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 8px 0;
  text-align: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.hot-city-item.active {
  border-color: #ff0000;
  color: #ff0000;
}

.area-selectors {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  height: 300px;
}

.area-selectors .selector {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  margin: 0 5px;
}

.area-selectors .scroll-container {
  padding: 20px 0;
}

.area-selectors .scroll-container div {
  padding: 12px 0;
  color: #666;
  cursor: pointer;
}

.area-selectors .scroll-container div.active {
  color: #ff0000;
  font-weight: bold;
}
</style>